<template>
  <div class="collect-article-box flex-col-start">
    <div class="body">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="收藏" name="1">
          <ArticleInfoBox :edit="false" :list="articleList" :menu="false">
          </ArticleInfoBox>
        </el-tab-pane>
        <el-tab-pane label="喜欢" name="2">

        </el-tab-pane>
        <el-tab-pane label="历史记录" name="3">

        </el-tab-pane>

      </el-tabs>
    </div>
  </div>
</template>

<script>
import ArticleInfoBox from "@/components/article/ArticleInfoBox.vue";

export default {
  name: "CollectArticle",
  components: {ArticleInfoBox},
  data() {
    return {
      activeTab: "1",
      articleList: [
        {
          title: "测试标题",
          content: "测试内容",
          typeList: [
            {
              name: "python"
            },
            {
              name: "java"
            }
          ],
          status: 1,
          visibility: 1,
          createTime: new Date(),
          collectNum: 11548485,
          likeNum: 1515,
          collect: true,
          like: false,
          image: "https://img0.baidu.com/it/u=2303941803,4000559364&fm=253&fmt=auto&app=138&f=JPEG?w=572&h=358"
        }
      ]
    }
  },
  methods: {
    handleTabClick(tab) {

    }
  },
  created() {
    for (let i = 0; i < 20; i++) {
      this.articleList.push({
        title: "测试标题",
        content: "测试内容",
        typeList: [
          {
            name: "python"
          },
          {
            name: "java"
          }
        ],
        status: 1,
        visibility: 1,
        createTime: new Date(),
        collectNum: 100,
        likeNum: 100,
        collect: true,
        like: true,
        image: "https://img0.baidu.com/it/u=2303941803,4000559364&fm=253&fmt=auto&app=138&f=JPEG?w=572&h=358"
      })
    }
  }
}
</script>

<style lang="less" scoped>
.collect-article-box {
  width: 100%;

  .body {
    width: 90%;
  }
}
</style>